<template>
  <div>
    <my-header title="修改密码"></my-header>
    <div class="change_pw">
      <mt-field label="旧密码" placeholder="请输入原密码" type="password" v-model="oldPw"></mt-field>
      <mt-field label="新密码" placeholder="请输入新密码" type="password" v-model="newPw"></mt-field>
      <mt-field label="确认密码" placeholder="请再次输入" type="password" v-model="again"></mt-field>
      <div style="text-align: center;margin-top: 1rem; margin-bottom: 1rem">
        <mt-button type="primary" @click="change" style="width: 90%">确认修改</mt-button>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "ChangePw",
    data() {
      return {
        oldPw: "",
        newPw: "",
        again: "",
      }
    },
    methods: {
      change() {
        console.log("账号："+this.newPw);

        if (this.oldPw === "") {
          this.$myUtils.bottomToast("旧密码不能为空");
          return
        }
        if (this.newPw === "") {
          this.$myUtils.bottomToast("新密码不能为空");
          return
        }
        if (this.again !== this.newPw) {
          this.$myUtils.bottomToast("两次密码输入不一致");
          return
        }
        //提交数据
        let postData = this.$qs.stringify({
          oldPw: this.oldPw,
          newPw: this.newPw,
        });
        //请求网络登录
        this.$axios.get(this.$apis.changePw, postData
        ).then(res => {
          console.log(res);
          if (res.data.code === 1) {
            //登录成功
            this.$router.push(("/login"));
            this.$myUtils.bottomToast(res.data.msg)
          } else {
            //弹错误提示
            this.$myUtils.bottomToast(res.data.msg)
          }
        })
          .catch(error => {
            this.$myUtils.bottomToast(error)
          })
      }
    }
  }
</script>

<style scoped>
  .change_pw {
    padding-top: 1.3rem;
    background: white;
    width: 100%;
    height: 100vh;
    /*height: 100%;*/
  }

</style>
